<template>
  <px-dialog v-model="visible" class="tool-dialog" title="导入失败原因" width="1200px" @close="closeDialog">
    <template #header>
      <p class="dialog-header">
        导入失败原因 <span>导入成功{{ errData?.successNum }}条，失败{{ errData?.errorNum }}条</span>
      </p>
    </template>
    <div class="tool-dialog-content">
      <CustomTabs :tabList="tabList" :activeName="activeName" @tabSelect="handelTabSelected" />
      <template v-if="activeName === 'REASON'">
        <vxe-table :data="errData?.errors" class="equip-table" max-height="500" border>
          <vxe-column
            v-for="(item, index) in tableColumns"
            :key="index"
            :title="item.label"
            :min-width="item.minWidth"
            :align="item.align"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :fixed="item.fixed"
          >
            <template #default="scope">{{
              scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
            }}</template>
          </vxe-column>
        </vxe-table>
        <!-- <pagination
          v-show="total > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          class="equip-table-pagination"
          :total="total"
          @pagination="queryTable"
        /> -->
      </template>
      <template v-else>
        <px-card v-if="errData?.notExitTags" shadow="never">
          <template #header><h3>点位缺失列表</h3></template>
          <px-input :value="errData?.notExitTags" type="textarea" :autosize="{ minRows: 3, maxRows: 10 }" maxlength="5000" clearable />
        </px-card>
        <px-empty v-else description="暂无缺失点位" />
      </template>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import CustomTabs from "@/components/Tabs/index.vue";
import { computed, reactive, ref, toRefs } from "vue";

// 调用父级-查询主页列表、关闭弹窗方法
const emits = defineEmits(["closeErrDialog", "errData"]);
// 父级传过来的值
const props = defineProps(["visible", "errData"]);
const visible = computed(() => props.visible);

const state = reactive<any>({
  total: 0,
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  tableColumns: [
    { prop: "measureName", label: "指标名称", minWidth: "180", showOverflowTooltip: true },
    { prop: "measureUnit", label: "指标单位", minWidth: "100", showOverflowTooltip: true },
    { prop: "places", label: "保留位数", minWidth: "90", showOverflowTooltip: true },
    { prop: "measureTag", label: "标签", minWidth: "100", showOverflowTooltip: true, type: "tag" },
    { prop: "measureTypeCode", label: "指标类型", minWidth: "90", showOverflowTooltip: true },
    { prop: "isDerived", label: "生成衍生指标", minWidth: "110", showOverflowTooltip: true },
    { prop: "facCode", label: "所属厂区", minWidth: "110", showOverflowTooltip: true },
    { prop: "monitorEntityType", label: "监控实体类型", minWidth: "120", showOverflowTooltip: true },
    { prop: "monitorEntityId", label: "监控实体", minWidth: "120", showOverflowTooltip: true },
    { prop: "monitorMaterialId", label: "监控物料", minWidth: "120", showOverflowTooltip: true },
    { prop: "measureSource", label: "指标来源", minWidth: "90", showOverflowTooltip: true },
    { prop: "isNeedCalculate", label: "需要计算", minWidth: "90", showOverflowTooltip: true },
    { prop: "calculateFormula", label: "计算公式", minWidth: "90", showOverflowTooltip: true, type: "calc" },
    { prop: "tagCodes", label: "所需点位", minWidth: "180", showOverflowTooltip: true },
    { prop: "tagCode", label: "绑定点位", minWidth: "180", showOverflowTooltip: true },
    { prop: "integralTagCodes", label: "需要积分点位", minWidth: "180", showOverflowTooltip: true },
    { prop: "minusTagCodes", label: "需要做差点位", minWidth: "180", showOverflowTooltip: true },
    { prop: "other", label: "其他", minWidth: "180", showOverflowTooltip: true }
  ]
});
const { total, queryParams, tableColumns } = toRefs(state);

const activeName = ref("REASON");

const tabList = [
  {
    name: "REASON",
    label: "指标失败原因"
  },
  {
    name: "LOST",
    label: "绑定点位缺失"
  }
];

// 切换tabs调用接口
const handelTabSelected = selectName => {
  activeName.value = selectName;
};

// 查询列表关闭弹窗
const closeDialog = () => {
  emits("closeErrDialog");
};
</script>

<style lang="scss" scoped>
.dialog-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  span {
    font-size: 14px;
    color: #666;
  }
}
</style>
